<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .success {
        background: rgb(232, 241, 217);
      }
      .error {
        background: rgb(243, 211, 211);
      }
    </style>
  </head>
  <body>
    <form name="form">
      <p>
        姓名 <input type="text" name="username" />
        <span id="username" style="display: none">用户名6-18个字符</span>
      </p>
      <p>
        邮箱 <input type="text" name="email" />
        <span id="email" style="display: none">邮箱格式错误</span>
      </p>
      <p>
        手机 <input type="text" name="phone" />
        <span id="phone" style="display: none">手机格式错误</span>
      </p>
      <p>
        年龄 <input type="text" name="age" />
        <span id="age" style="display: none">年龄18-80</span>
      </p>
      <p>
        密码 <input type="password" name="password" />
        <span id="password" style="display: none">密码必须6-18位</span>
      </p>
      <p>
        确认 <input type="password" name="cpassword" />
        <span id="cpassword" style="display: none">两次密码输入不一致</span>
      </p>
      <p>
        <button type="button" data-action="submit">提交</button>
      </p>
    </form>
    <script>
      // /^(?:(?:\+|00)86)?1\d{10}$/;
      // /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

      // /^\S*(?=\S{11,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/

      const from = document.form;

      /*
        表单验证
        1. 不为空验证
        oninput 实现输入验证
        1. 事件委托绑定事件
        2. 通过判断用户在哪个对象输入
        3. 验证用户输入
        封装重复的业务逻辑（函数封装）
        valid 验证用户输入，通过自定义验证规则，如果验证通过设置成功验证样式返回true，否则设置失败验证样式返回false
        1. 输入（参数：验证表单对象，回调函数规则）
          回调函数，返回true，返回false验证失败
          参数：用户输入值
        2. 输出（返回值）
          验证通过，返回true，返回false验证失败
        */
      function valid(target, cb) {
        const name = target.name;
        const errMsg = document.getElementById(name);
        const r = cb(target.value);
        if (r === false) {
          errMsg.style.display = "";
          target.classList.remove("success");
          target.classList.add("error");
        } else {
          errMsg.style.display = "none";
          target.classList.remove("error");
          target.classList.add("success");
        }
        return r;
      }

      // 输入验证
      document.oninput = function (e) {
        const name = e.target.name;
        // 验证用户名
        if (name === "username") {
          valid(e.target, function (value) {
            //验证规则
            return /^\w{2,18}$/.test(value);
          });
        }
        // 验证邮箱
        if (name === "email") {
          valid(e.target, function (value) {
            //验证规则
            return /^\w+@\w+\.\w+$/.test(value);
          });
        }
        // 验证手机
        if (name === "phone") {
          valid(e.target, function (value) {
            //验证规则
            return /^1[3-9]\d{9}$/.test(value);
          });
        }

        // 验证年龄
        if (name === "age") {
          valid(e.target, function (value) {
            //验证规则
            return +value >= 18 && +value <= 80;
          });
        }

        // 验证密码
        if (name === "password") {
          valid(e.target, function (value) {
            //验证规则
            return value.length >= 6 && value.length <= 18;
          });
        }

        // 确认验证
        if (name === "cpassword") {
          valid(e.target, function (value) {
            //验证规则
            return value === form.password.value;
          });
        }
      };

      // 提交验证
      document.onclick = function (e) {
        const action = e.target.dataset.action;
        if (action === "submit") {
          //验证用户名
          const username = valid(from.username, function (value) {
            //验证规则
            return /^\w{2,18}$/.test(value);
          });

          // 验证邮箱
          const email = valid(form.email, function (value) {
            //验证规则
            return /^\w+@\w+\.\w+$/.test(value);
          });

          // 验证手机
          const phone = valid(form.phone, function (value) {
            //验证规则
            return /^1[3-9]\d{9}$/.test(value);
          });

          // 验证年龄
          valid(form.age, function (value) {
            //验证规则
            return +value >= 18 && +value <= 80;
          });

          // 验证密码
          const password = valid(form.password, function (value) {
            //验证规则
            return value.length >= 6 && value.length <= 18;
          });

          // 确认验证
          const cpassword = valid(form.cpassword, function (value) {
            //验证规则
            return value === form.password.value;
          });

          if (username && phone && email && age && password && cpassword) {
            console.log("注册成功");
          }
        }
      };
    </script>
  </body>
</html>
